<template>
	<div class="hello" style="width: 100%;">
		<!-- 用于渲染子组件 -->
	<!-- <router-view></router-view> -->
		<div style=" margin-left: 120px;height: 50px;"><h2 style="text-align: left;">工单管理/工单列表/快捷开单</h2></div>
		<div style="height: 20px;"><hr /></div>

		<div style="width: 100%;" class="d-spb">
			<div class="d-flex">
				<div style="height: 60px;margin-left: 30px;"><h3>{{carNum}}</h3></div>
				<div style="margin-left: 5px;margin-top: 30px;"><i class="el-icon-edit-outline" @click="dis==false?setCar():dm()"></i></div>
				<!-- v-if="showSwitch" -->
				<div style="margin-top: 25px;margin-left: 120px;"><el-switch  inactive-color='#999999' v-model="radio" active-color="#13ce66"  @change="check()" :disabled="dis"></el-switch></div>
				<div style="margin-top: 25px;margin-left: 10px;">
					使用他人会员卡
					<span>{{state}}</span>
				</div>
				<!--  -->
			</div>

			<div style="color:#666666">
				
				<div class="d-flex" style="margin-top: 25px;align-items: center;">
					<div>
					<el-input v-model="carAddTel" size="small" class="phone" style="height: 23px;width: 200px;" placeholder='添加手机号' @change='inputTel' :disabled="dis"></el-input>
					</div>
					<div>
					<el-input v-model="carAddName" size="small" class="phone" style="margin-left: 20px;;height: 23px;width: 200px;" placeholder='添加姓名' @change='inputName' :disabled="dis"></el-input>
					</div>
					<div style="margin-left: 20px;align-items: center;margin-top: 8px;" class="d-flex">
						<div>
							
						挂账:
						</div>
						<div style="color:red;">¥&nbsp;{{buyer}}</div>
					</div>
					<div style="margin-left: 20px;" class="d-flex" v-if="showInput">
						<div>本次公里数</div>
						<div style="margin-left: 5px;" class="d-flex">
							<el-input v-model="carKil" size="small" class="kil" style="height: 23px;width: 50px;" :disabled="dis"></el-input>
							<div style="margin-top: 4px;margin-left: 5px;">KM</div>
						</div>
					</div>
				</div>



				<div class="d-flex" style="margin-top: 20px;" v-if="showInput">
					<div>
					<el-input v-model="carAddEngine" size="small" class="phone" style=";height: 23px;width: 200px;" placeholder='添加发动机' :disabled="dis"></el-input>
					</div>

					<div>
					<el-input v-model="carVin" size="small" class="phone" style="margin-left: 20px;;height: 23px;width: 200px;" placeholder='添加车架号' :disabled="dis"></el-input>
					</div>
					<div class="d-flex" style="margin-top: 5px;">
						<div style="margin-left: 20px;">车辆注册日期</div>
						<div style="width: 100px;height: 23px;margin-left: 5px;" class="c-date">
							<el-date-picker size="mini" :clearable="false" v-model="carDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :disabled="dis"></el-date-picker>
						</div>
					</div>
				</div>

				<div class="d-flex" style="margin-top: 20px;align-items: center;" v-if="showInput">
					<div>
					<el-input v-model="carColor" size="small" class="phone" style=";height: 23px;width: 120px;" placeholder='车身颜色' :disabled="dis"></el-input>
					</div>
					<div style="height:23px;margin-left:20px" class="cartype">
						<el-select  placeholder="请选择车型" @change='chCar' v-model="carType" size="mini" :disabled="dis">
							<el-option
							      v-for="item in carTypes"
							      :key="item.brandId"
							      :label="item.brandName"
							      :value="item.brandId+'/'+item.brandName">
							</el-option>
						</el-select >
						<el-select @visible-change='chCar2'  placeholder="请筛选完车型后进行车系选择" v-model="amgValue" size="mini" :disabled="dis">
							<el-option
							      v-for="item in amg"
							      :key="item.familyId"
							      :label="item.familyName"
							      :value="item.familyId+'/'+item.familyName">
							</el-option>
						</el-select >
							
				</div>
				</div>

				<div class="d-flex" style="margin-top: 20px;">
					<div>开单时间:</div>
					<div>{{ orderTime }}</div>
				</div>
			</div>
		</div>






		<div class="d-flex" style="height: 60px;margin-left: 30px;">
				
			<div style="width: 300px;"><el-input  v-model="search"  placeholder="请输入搜索内容..." @focus='searchShowClick' :disabled="dis"></el-input></div>
			
			

			
			
			
			
			
			
			
			
			
			<div style="margin-left: 10px;"><el-button @click="searchShowClick" type="primary" :disabled="dis">搜索</el-button></div>
			<div style="margin-left: 20px;margin-top: 20px;">
				<font size="1">
					<font color="#808080">找不到项目？</font>
					<el-button type='text' style="color: #0000FF;" @click='openNs'>新建服务</el-button>
					<el-popover placement="top-start" width="200" trigger="hover" content="服务不计入库存,如:洗车、保养..."><i class="el-icon-question" slot="reference"></i></el-popover>
					<el-button type='text' style="margin-left:5px; color: #0000FF;" @click='openNp'>新建商品</el-button>
					<span style="color: #0000FF;">(配件)</span>
					<el-popover placement="top-start" width="200" trigger="hover" content="商品计入库存,如:玻璃水、机油滤芯..."><i class="el-icon-question" slot="reference"></i></el-popover>
				</font>
			</div>
		</div>

		<div style="height: 50px;margin-top: 50px;" >
			<div style="height: 60px;margin-left: 30px;"><h3 style="text-align: left;">快速选择开单项目</h3></div>

		<div class="vipBox d-flex">
			<div v-for="(item,index) in sCheck" :key='index' style="padding:0 10px;height: 40px;line-height: 40px;color: #fff;background:#b0b0b0;text-align: center;border-radius: 10px;margin-right: 10px;" @click="vipChange(item,index)" :class="{actives:vipBoxCur==index}">{{item.memberCardName}}</div>
		</div>
		
			<div style=""><hr /></div>
		</div>



<!-- <el-button @click='showChecked'>点击</el-button> -->




		<div style="width: 100%;margin-top: 70px;">
			
			<div style="margin-left: 50px; " class="c-checkBoxs">
				<el-checkbox-group @change="checkGroup" v-model="checkServer" style="width:100%;flex-wrap:wrap;display: flex;justify-content: left;">
					<el-checkbox @change="checkChange(index,item)" style="margin-top: 10px;" v-for="(item, index) in fCheck" :key="index" :label="item" class="c-checked" v-model="item.checked" :disabled='dis'>
						<template>
							<div>{{ item.goodsName }}</div>
							<div style="margin-left: 5px;">¥{{ item.price }}</div>
						</template>
					</el-checkbox>
				</el-checkbox-group>
			</div>
			
			
			
			<div style="text-align: left;color:#c5c5c8;margin-top:20px;margin-left: 50px;border-left:3px solid #6F93FE;padding-left:3px;">储值卡内常用项目</div>
				<el-checkbox-group @change="checkGroup2" v-model="checkServer2" style="">
			<div style="margin-left: 50px;" class="c-checkBoxs" >
				<div style="width:100%;flex-wrap:wrap;display: flex;justify-content: left;">	
					<el-checkbox @change="checkChange2(index,item)" style="margin-top: 10px;" v-for="(item, index) in vipbox.laborItemsVoList" :key="index" :label="item" class="c-checked">
						<template>
							<div>{{ item.name }}</div>
							<div class="d-flex">
								<div class="discount">{{item.count}}折</div>
								<div style="margin-left: 5px;color:#6F93FE">
									¥
									<span style="font-size: 18px;">{{item.price}}</span>
								</div>
							</div>
						</template>
					</el-checkbox>
				</div>
			<div style="width:100%;flex-wrap:wrap;display: flex;justify-content: left;" class="c-checkBoxs">
					<el-checkbox @change="checkChange2(index,item)" style="margin-top: 10px;" v-for="(item, index) in vipbox.freeItemsVoList" :key="index" :label="item" class="c-checked">
						<template>
							<div>{{ item.name }}</div>
							<div style="margin-left: 5px;">剩余{{item.surplusCount}}次</div>
						</template>
					</el-checkbox>
			</div>		
			</div>
			
			
				</el-checkbox-group>







			<div style="margin-left: 20px;margin-top: 70px;text-align: center;">
				<font size="1"><font color="#808080">更多项目请在搜索栏中搜索~</font></font>
			</div>
		</div>

		<div class="end d-spb" style="margin-left: 20px;margin-right20px;">
			
			
			
			<!-- 'visibility':carNone -->
			<div :style="{'position':'relative',}">
				<div class="end-img d-flex">
					<div @click="dis==false?showCar():dm()" class="carAlert"><img src="../../assets/car.png" alt="" /></div>
					<div class="icon" style="text-align: center;">{{dis==false?carList.length:fCheck.length }}</div>
				</div>
				<!-- 购物车弹窗 -->
				<div class="carTable" v-if="isCarShow">
					<el-table :data="carList" style="width: 100%" show-summary :summary-method="getSummaries" >
						<el-table-column prop="goodsName" label="已选项目" width="180"></el-table-column>
						<el-table-column prop="num" label="清空" width="200">
							<template slot="header" slot-scope="{ column, $index }">
								<span @click="clearAll">
									<i class="el-icon-delete"></i>
									清空
								</span>
							</template>
							<template slot-scope="scope">
								<span @click='handleDelete(scope.$index, scope.row)' style="margin-right:5px;color:#4c6acc;font-size: 5px;" class="carDel">删除</span>
								<span style="color:rgb(223, 150, 90)"><el-input-number size="small" v-model="scope.row.goodsCount"  :min="1" :max="10" @change="carGoodsCount(scope.$index, scope.row)"></el-input-number></span>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="" width="80">
							<template slot="header" slot-scope="{ column, $index }">
								<i class="el-icon-close" @click="closeCar"></i>
							</template>
							<template slot-scope="scope">
								<span style="color:rgb(223, 150, 90)">¥{{ scope.row.price }}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>

			<div class="end-btn d-flex">
				<div class="title">
					已选&nbsp;
					<span style="font-size:28px;color:#f00">{{ dis==false?carList.length:fCheck.length }}</span>
					&nbsp;个项目
				</div>
				<div style="margin-left: 10px;"><el-button type="primary" size="mini" @click='toBill'>下一步</el-button></div>
			</div>
		</div>
		
		
	
	
	
		
		
		<!-- 搜索框弹窗 -->
		<el-dialog :visible.sync="searchShow" width="800px" :close-on-click-modal='false'>
			<div style="padding-top: 15px;">
				<el-row>
					<el-col class="tabs" style="font-weight: bold;color: black;font-size: 18px;" v-for="(item,index) in tabTitle" :key='index' :span="8"><p style="text-align: center;padding-bottom: 10px;" :class="{active:cur==index}" @click="tabChangess(index)">{{item}}</p></el-col>
				<el-col :span="8" style="font-weight: bold;color: #999acd;font-size: 18px;text-align: center;line-height: 64px;" class="checked">已选项目</el-col>
				</el-row>
			</div>
			<div class="col" style="margin-top: 38px;">
				<el-row>
					<!-- 左边一二级菜单 -->
				  <el-col :span="5">
						<div style="text-align: left;" class="grid-content bg-purple">
							<el-menu
								class="el-menu-vertical-demo"
								@open="handleOpen"
								@close="handleClose" v-for="(item,index) in searchList" :key='index'>
									<el-submenu  :index="item.code" >
										<template slot="title">
											<span>{{item.name}}</span>
										</template>
										<el-menu-item-group v-for="(list,idx) in item.mapList" :key='idx'>
											<el-menu-item @click='handleClassify(list)' :index="list.code">{{list.name}}</el-menu-item>
										</el-menu-item-group>
									</el-submenu>
								</el-menu>
						</div>
					</el-col>
					<!-- 中间已选择商品 -->
				  <el-col :span="14">
						<div style="" class="grid-content bg-purple-light">
							<el-row>
								<el-col :span="8">名称</el-col>
								<el-col :span="8">价格</el-col>
								<el-col :span="8" style="text-align: right;padding-right: 13px;">选择</el-col>
							</el-row>
							<el-table  ref="multipleTable"  :show-header="false" :data="serverList" @selection-change='serverChecked' :row-key="getRowKeys">
								<el-table-column prop="goodsName"></el-table-column>
								<el-table-column prop="price">
									<template slot-scope="scope">
										¥{{scope.row.price}}
									</template>
								</el-table-column>
								<el-table-column type="selection"  :reserve-selection="true"></el-table-column>
							</el-table>
						</div>
					</el-col>
					<!-- 右边删除 -->
				  <el-col :span="5">
						<div v-for="(selected,index) in serverSelected" :key='index' style="text-align: center;" class="grid-content bg-purple">
							<el-col style="margin-top: 10px;" :span='20'>{{selected.goodsName}}</el-col>
							<el-col style="margin-top: 13px;" :span='4'><i @click="delSelected(selected.goodsCode)" class="el-icon-close"></i></el-col>
						</div>
					</el-col>
				</el-row>
			</div>
			<span slot="footer" class="dialog-footer">
			  <el-button @click="close">取 消</el-button>
			  <el-button type="primary" @click="onfirm">确 定</el-button>
			</span>
			
		</el-dialog>
		
		<!-- 新建商品 -->
		<newproduct :npIsShow='npIsShow' :searchList='options' @sendNp='sendNp' @saveNp='saveNp' @closeNp='closeNp'></newproduct>
		<!-- 新建服务 -->
		<newserve :nsIsShow='nsIsShow' :nsList='nsList' :searchList='options' @sendNs='sendNs' @saveNs='saveNs' @closeNs='closeNs'></newserve>
		<!-- 编辑车辆 -->
		<setCar :setCarshow='setCarshow' @closeCarAlert='closeCarAlert'  @carConfirm="sendCarData" ></setCar>
		<!-- 使用他人会员卡 -->
		<uservip :usevip='usevip' :vehicleId='vehicleId' @closeVipAlert='closeVipAlert'  @vipConfirm="sendVipData"></uservip>
	</div>
</template>

<script>
	// 新建服务
	import newserve from './comprehensiveOrderChildren/newServe.vue'
	// 新建商品
	import newproduct from './comprehensiveOrderChildren/newProduct.vue'
	// 编辑车牌弹窗
	import setCar from '../Alert/setCar.vue';
	// 使用他人会员卡弹窗
	import uservip from '../Alert/useVip.vue';
export default {
	components:{
		newproduct,
		newserve,
		setCar,
		uservip,
	},
	data() {
		return {
			//会员卡开关
			showSwitch:true,
			
			
			
			//他人会员卡信息
			state:null,
			
			
			//是否是会员
			isThereVip:null,
			
			
			
			// 新建商品弹窗
			npIsShow:false,
			// 新建服务弹窗
			nsIsShow:false,
			nsList:null,
			options:null,
			
			carNone:'',
			
			
			// 客户编码
			customerCode:null,
			
			// 弹窗服务--
			// tab选项
			cur:0,
			tabTitle:['服务','商品'],
			// 判断是否携带参数
			showInput:false,
			
			
			// 搜索框弹窗
			// 已选项目
			serverSelected:[],
			// 二级分类显示数组
			serverList:[],
			// 是否显示弹窗
			searchShow:false,
			// 搜索框弹窗一二级数据
			searchList:[],
			// 购物车
			// 购物车显示
			isCarShow:false,
			// 购物车
			carList:[],
			carList1:[],
			carList2:[],
			// 选择总共项目
			allNum: 0,

			// 多选2
			checkServer2: [],
			sCheck: [],
			// 多选1
			checkServer: [],
			fCheck: [],
			// 会员卡tab
			vipbox:[],
			vipBoxCur:null,
			
			// 使用他人会员卡弹窗
			usevip:null,
			// 使用他人会员卡名字/电话号码/车牌号
			otherName:'',
			otherPhone:'',
			otherCar:'',
			// 使用他人会员单选框
			radio: null,
			// 搜索框
			search: '',
			// 开单时间
			orderTime: '今天',
			// 车型选择
			amgValue: '',
			amg: [],
			// 筛选车型
			carType: '',
			carTypes: [],
			// 挂账
			buyer: '0',
			// 车身颜色
			carColor:'',
			// 车辆注册日期
			carDate: '',
			
			// 车架号
			carVin:'',
			// 公里数
			carKil: '',
			// 添加发动机号
			carAddEngine:'',
			// 添加姓名
			carAddName:null,
			// 添加手机号
			carAddTel:null,
			// 车牌
			// 车牌弹窗
			setCarshow:false,
			// 车主id
			vehicleId:null,
			carNum:'暂无车牌',
			// 查看禁用
			dis:false,
			
			choosed:[],
			// checkServer:[],
		};
	},
	created() {
		this.merchantCode=this.$route.query.merchantCode
		this.useType=this.$route.query.type
		this.orderId=this.$route.query.orderid
		console.log('工单id',this.orderId)
		this.workOrderCode=this.$route.query.workOrderCode
		if(this.$route.query.has=='has'){
			this.carNum=this.$route.query.carNum
			this.showInput=true
			this.inputVipList(this.carNum)
		}
		if(this.$route.query.type=='look'){
			let copy=''
			this.getLookList(copy)
			this.dis=true
			this.carNone='none'
			this.showInput=true
		}else if(this.$route.query.type=='copy'||this.$route.query.type=='set'){
			let copy='copy'
			this.getLookList(copy)
			this.dis=false
			this.carNone='hidden'
			this.showInput=true
			this.getFcheck()
			setTimeout(()=> {
			console.log('编辑复制需要选中的',this.choosed)
				
			let arr=[]
			let arr2=[]
			// console.log(1111,this.sCheck)
			console.log('刷新',this.choosed)
			this.choosed.map(item => {
				console.log('会员卡',item.goodsVipId)
				if(item.goodsVipId==null){
					this.fCheck.map(items => {
							if(item.goodsName==items.goodsName){
								arr.push(items)
							}
					})
				 }else{
					 console.log(123,this.sCheck)
					this.sCheck.map(pd => {
						pd.laborItemsVoList.map(lab => {
							console.log('循环',lab)
							if(item.goodsName==lab.goodsName){
								console.log(99999)
								arr2.push(lab)
							}
						})
					})		
					
				 }
			})
			
			console.log('购物车',arr,arr2)
			// console.log('高亮',arr,333,this.sCheck,this.checkServer,222,arr2)
			this.checkServer=arr
			this.checkServer2=arr2
			
			this.carList=arr2.concat(arr)
			
			
			}, 2000);
		}else{
			this.getFcheck()
			this.getCarBrand()
		}
	},
	methods: {
		//新建客户/车牌号
		addNew(plateNumber,phone,name){
			this.$http.post('/laborSynthesize/addCarAndCustomer',{
				plateNumber, //String 车牌号   
				phone, //String 手机号   
				name, //String  客户姓名 
				source:'S',
				merchantCode:this.merchantCode
			})
			.then(res=>{
				 console.log('%c请求新增结果','color:red;font-size:20px',res)
				 if(res.code == '10000'){
					 this.vehicleId=res.data.vehicleId
					 this.customerCode=res.data.customerCode
				}else{
					 alert(res.message)
			}
			})
		},
		
		
		
		
		//数据回显
		getRowKeys(row) {
		    return row.goodsCode;
		},
		
		
		
		
		dm(){console.log('dis',this.dis)},
		
		/**
		 * 工单列表进入查看
		 */
		getLookList(copy){
			this.$http.get('/WorkOrder/getWorkOrderInfo',{
				merchantCode:this.merchantCode,
				orderCode:this.$route.query.workOrderCode,
				orderType:2,
			})
			.then(res=>{
				 console.log('请求查看快捷开单结果',res)
				 if(res.code == '10000'){
							copy,
							//车牌号
							this.carNum=res.data.plateNumber
							// 手机号
							this.carAddTel=res.data.customerPhone
							// 客户姓名
							this.carAddName=res.data.customerName
							// 本次里程
							this.carKil=res.data.mileage
							// 车辆注册日期
							this.carDate=res.data.registeredDate
							// 发动机号
							this.carAddEngine=res.data.engineNum
							// 车架号
							this.caVin=res.data.vehicleIdNum
							// 车身颜色
							this.carColor=res.data.carColor
							// 车型名称
							this.carType=res.data.modelName
							// 车系名称
							this.amgValue=res.data.seriesName
							// 已经选择的开单项目
							this.choosed=res.data.laborGoodsVoList
							// this
							// this.checkServer=this.checkServer.concat(this.choosed)
							// console.log('编辑复制需要选中的',this.checkServer)
							// this.fCheck=res.data.laborGoodsVoList
							// this.checkServer=this.fCheck
							//客户编码
							this.customerCode=res.data.customerCode
							// res.data.laborGoodsVoList.map(item=>{
							// 	this.carList.push(item)
							// })
							//工单状态
							this.orderStatus=res.data.status
							
							
							//+++++++++++++++++++++++
							this.inputVipList(res.data.plateNumber)
							//+++++++++++++++++++++++
							
							// this
				}else{
					 alert(res.message)
			}
			})
		},
		
		
		
		
		
		
		
		
		/**
		 * 获取快捷下单商品列表
		 */
		getFcheck(){
			this.$http.get('/LaborGoods/findFastOrderGoods',{
				merchantCode:this.merchantCode
			})
			.then(res=>{
				console.log('快捷开单商品列表结果',res)
				 if(res.code == '10000'){
					 res.data.map(item=>{
						 item.goodsCode=item.code
						 item.goodsCome=3
						 item.goodsVipId=null
						 item.goodsCount=1
					 })
					this.fCheck=res.data
				}
			})
		},
		



		
		/**
		 * 获取他人会员卡内的商品
		 */
		getVipProduct(customerCode){
			this.$http.get('/LaborFastOrder/findOtherVipGoods',{
				merchantCode:this.merchantCode,
				customerCode
			})
			.then(res=>{
				 console.log('请求会员卡列表结果',res)
				 if(res.code == '10000'){
					 res.data.map(item=>{
						 if(item.memberCardType==3){//次卡
							 item.laborItemsVoList.map(items=>{
							 items.goodsCome=2
							 items.goodsName=items.name
							 items.goodsVipId=item.customerMemberCardId
							 items.goodsCount=1
							 items.num=items.goodsCount
							 })
							 item.freeItemsVoList.map(items=>{
								 items.goodsCome=2
								 items.goodsName=items.name
								 items.goodsVipId=item.customerMemberCardId
								 items.goodsCount=1
								 items.num=items.goodsCount
							 })
							 this.sCheck.push(item)
						 }
					 })
				this.radio=true
				console.log('%c展示的会员卡','color:#ff0000;font-size:20px;font-weight:bold',this.sCheck)
				}else{
					 alert(res.message)
					 this.radio=false
			}
			})
		},
		
		/**
		 * 输入车牌获取客户信息以及自己会员卡信息
		 */
		inputVipList(condition){
			this.$http.get('/LaborFastOrder/findVipGoods',{
				merchantCode:this.merchantCode,
				condition
			})
			.then(res=>{
				 console.log('请求输入车牌号结果',res.data.vehicleId,res)
				 if(res.code == '10000'){
					 //是否是会员卡
					 if(res.data.vipList.length==0){
						this.isThereVip=0	 
					 }else{ 
						this.isThereVip=1
					 }
					
					// 手机号
					this.carAddTel=res.data.customerPhone
					// 客户姓名
					this.carAddName=res.data.customerName
					// 本次里程
					this.carKil=res.data.lastMileage
					// 车辆注册日期
					this.carDate=res.data.registeredDate 
					// 发动机号
					this.carAddEngine=res.data.engineNum
					// 车架号
					this.carVin=res.data.vehicleIdNum
					console.log('车架号',this.carVin)
					// 车身颜色
					this.carColor=res.data.vehicleColor
					// 车型名称
					this.carType=res.data.modelName
					// 车系名称
					this.amgValue=res.data.seriesName
					// 会员卡id
					this.goodsVipId=res.data.customerMemberCardId
					// 商家名称
					this.merchantName=res.data.merchantName
					// 商家电话
					this.merchantPhone=res.data.merchantPhone
					//车主id
					this.vehicleId=res.data.vehicleId
					//车主code
					this.customerCode=res.data.customerCode
					
					this.showInput=true
					this.sCheck=[]
					if(res.data.vipGoodsList){
						let arr = []
						res.data.vipGoodsList.map(item=>{
						if(item.memberCardType==3){//次卡
							 item.laborItemsVoList.map(items=>{
								 items.goodsCount=1
								 items.num=items.goodsCount
							 items.goodsCome=1
							 items.goodsName=items.name
							 items.goodsVipId=item.customerMemberCardId
							 items.type=items.goodsType
							 })
							 item.freeItemsVoList.map(items=>{
								 items.goodsCome=1
								 items.goodsName=items.name
								 items.goodsCount=1
								 items.num=items.goodsCount
								 items.goodsVipId=item.customerMemberCardId
							 })
							 arr.push(item)
						}
						})
						this.sCheck=this.deWeight(arr)
						// console.log('%c自己会员卡','color:#70ff57;font-size:20px;font-weight:bold',this.sCheck)
					}
					// this
				}else{
					 alert(res.message)
			}
			})
		},
		
		/**
		 * @param {Object} 会员卡tab变化
		 */
		vipChange(val,idx){
			console.log('选中的会员卡',val)
			this.vipBoxCur=idx
			this.vipbox=val
			console.log('张氏的会员卡',this.vipbox)
		},
		

// ====================================================================================================================		
// ====================================================================================================================		
		// 选择的车牌
		chCar(val){
			console.log('选择车型',val)
			this.brandId=val.split('/')[0]
		},
		
		// 选择车系
		chCar2(){
			this.$http.get('/laborSynthesize/getSeriesList',{
				brandId:this.brandId
			})
			.then(res=>{
				 if(res.code == '10000'){
				this.amg=res.data
				}else{
					 alert(res.message)
			}
			})
		},
				
// ====================================================================================================================		
// ====================================================================================================================		
		/**
		 * 下一步进入快捷开单--进行开单
		 */
		toBill(){
			var carType2=''
			var amgValue2=''
			// console.log('车型车系',this.carType,this.amgValue)
			if(this.carType!=null){
				carType2=this.carType.split('/')[1]
			}
			if(this.amgValue!=null){
				amgValue2=this.amgValue.split('/')[1]
			}
			// console.log(carType2,amgValue2)
			let isMyCard
			let goodsCome
			if(this.radio==true){
				isMyCard=1
				goodsCome=1
			}else{
				isMyCard=0
				goodsCome=2
			}
				
				let type=this.useType
				let orderid=this.orderId
				console.log('type',type,orderid)
				let workOrderCode=this.workOrderCode
				
				if(this.carList.length==0){
					this.$alert('请选择商品', '提示', {
					 confirmButtonText: '确定',
				 });
				}else{
					// conso
					this.carList.map(item => {
						if(item.type==2){
							item.type=1
						}else if(item.type==2){
							item.type=2
						}
						if(item.goodsType){
							if(item.goodsType==2){
								item.type=1
							}else if(item.goodsType==2){
								item.type=2
							}
						}
						
					})
				this.$router.push({
					path:'/quickOrderBill',
					query:{
						//是否是会员
						isThereVip:this.isThereVip,
						merchantPhone:this.merchantPhone,
						merchantName:this.merchantName,
						orderid,
						workOrderCode,
						type,
						merchantCode:this.merchantCode,
						// 车牌号
						plateNumber:this.carNum,
						// 会员卡id
						goodsVipId:this.goodsVipId,
						// 来源
						goodsCome,
						// 使用他人会员卡
						isMyCard,
						// 客户姓名
						customerName:this.carAddName,
						// 客户手机号
						customerPhone:this.carAddTel,
						// 本次里程
						mileage:this.carKil,
						// 发动机号
						engineNum:this.carAddEngine,
						// 车架号
						vehicleIdNum:this.caVin,
						// 车辆注册日期
						applyDate:this.carDate,
						// 车身颜色
						carColor:this.carColor,
						// 车型名
						modelName:carType2,
						// 车系名
						seriesName:amgValue2,
						// 客户编码
						customerCode:this.customerCode,
						// 传过去的商品
						laborOrderGoodsList:this.carList,
						
						orderStatus:this.orderStatus
					}
				})
			}
		},
		
// ====================================================================================================================				
// ====================================================================================================================				
		/**
		 * 搜索框弹窗
		 */
		searchShowClick(){
			this.searchShow=true
			this.getTree('1')
		},
		
		
		/**
		 * 获取新建服务分类的 一 二 三级列表
		 */
		getOptions(type){
			this.$http.get('/LaborGoods/threeCategoryList',{
				merchantCode:this.merchantCode,
				parentCode:'0',
				type,
			})
			.then(res=>{
				 console.log('%c请求新建服务分类的 一 二 三级列表结果','color:red;font-size:20px',res)
				 if(res.code == '10000'){
					 res.data.map(item => {
						 item.value=item.code+','+item.name
						 item.label=item.name
						 item.mapList.map(items=>{
						 	items.value=items.code+','+items.name
						 	items.label=items.name
						 	if(items.children){
						 		items.children.map(ch=>{
						 			ch.value=ch.code+','+ch.name
						 			ch.label=ch.name
						 		})
						 	}else{
						 		items.children=[]
						 	}
						 })
						 item.children=item.mapList
					 })
					this.options=res.data
				}else{
					 alert(res.message)
			}
			})
		},
		
		
		// 获取一二级分类
		getTree(type){
			this.$http.get('/LaborGoods/categoryList',{
				merchantCode:this.merchantCode,
				parentCode:'0',
				type,
			})
			.then(res=>{
				 console.log('请求弹窗树状结果',res)
				 if(res.code == '10000'){
						this.searchList=res.data
						res.data.map(item=>{
							item.value=item.code+','+item.name
							item.label=item.name
							item.mapList.map(items=>{
								items.value=items.code+','+items.name
								items.label=items.name
								if(items.children){
									items.children.map(ch=>{
										ch.value=ch.code+','+ch.name
										ch.label=ch.name
									})
								}else{
									items.children=[]
								}
							})
							item.children=item.mapList
						})
						
						// console.log('%c商品模板','color:#70ff57;font-size:20px;font-weight:bold',this.options)
				}
			})
		},
		
		// 获取三级列表
		getThree(categoryCode,level){
			this.$http.get('/LaborGoods/findGoodsInfo',{
				merchantCode:this.merchantCode,
				categoryCode,
				level
			})
			.then(res=>{
				 console.log('请求弹窗树三级结果',res)
				 if(res.code == '10000'){
					this.serverList=res.data
				}
			})
		},
		
	// ====================================================================================================================			
	// ====================================================================================================================			
		//tab选项改变
		tabChangess(e){
			console.log('选中的选项',e)
			this.cur=e
			this.getTree(e+1)
		},
	// ====================================================================================================================			
	// ====================================================================================================================			
		
		// 删除已选择商品
		delSelected(val){
			let idx
			this.serverList.map((item,index)=>{
				if(val==item.goodsCode){
					idx=index
				}
			})
			this.$refs.multipleTable.toggleRowSelection(this.serverList[idx],false)
			//fcheck删除
			this.fCheck.map((item,ix) => {
				if(this.serverList[idx]==item){
					this.fCheck.splice(ix,1)
				}
			})
			
			
			// 购物车删除
				this.carList.map((item,i) => {
					console.log('删除购物车')
					if(this.serverList[idx] == item){
						console.log('删除购物车下标',i,idx)
						this.carList.splice(i,1)
					}
				})
			
			
			
			
		},
		// 勾选商品
		serverChecked(e){
			console.log('勾选选项',e)
			this.serverSelected=e
		},
		// 选中二级分类
		handleClassify(e){
			console.log('二级分类',e)	
			this.getThree(e.code,'3')
			// 
		},
		// 关闭按钮
		close(){
			console.log('关闭')
			this.searchShow=false
		},
	
		// 确定按钮
		onfirm(){
			console.log('搜错弹窗最后确认按钮',this.serverSelected)
			this.searchShow=false
			this.serverSelected.map(item=>{
				item.goodsCome=3
				item.goodsCount=1
				item.num=item.goodsCount
			})
			
			this.serverSelected.map((item,idx) => {
				this.fCheck.map((item2,idx2) => {
					if(item.goodsName==item2.goodsName){
						this.fCheck.splice(idx2,1)
					}
				})
			})
			
			this.fCheck=this.fCheck.concat(this.serverSelected)
			
			this.checkServer=this.checkServer.concat(this.serverSelected)
			
			
			// this.fCheck=this.deWeight2(this.fCheck)
			
			this.carList=this.deWeight(this.checkServer)
		},
		
		
		
		
		
		
		
		// 打开弹窗
		handleOpen(e){
			console.log('打开二级列表',e)
		},
		// 关闭弹窗
		handleClose(e){
			console.log('关闭二级列表',e)
		},
		
		/**
		 * 购物车
		 */
		// 合计
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			let values = [];
			console.log('params', param);
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '总计';
					return;
				}
				if (column.property == 'price') {
					values = data.map(item => Number(item.goodsCount * item.price));
				} else {
					values = data.map(item => Number(item['goodsCount']));
				}
				if (column.property == 'price') {
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' 元';
					} 
				} else if (column.property == 'goodsCount') {
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' 件';
					}
				}
			});
			return sums;
		},
		carGoodsCount(idx,row){
			this.$set(this.carList,idx,row)
		},
		// 删除购物车单个商品
		handleDelete(index, row) {
      this.carList.splice(index, 1)
			this.checkServer.map((item,idx) => {
				if(row == item){
					this.checkServer.splice(idx,1)
					this.carList1.splice(idx,1)
				}
			})
			this.checkServer2.map((item,idx) => {
				if(row == item){
					this.checkServer2.splice(idx,1)
					this.carList2.splice(idx,1)
				}
			})
			console.log('删除后剩下的商品',this.checkServer,this.checkServer2)
		},
		// 全部清空
		clearAll(e) {
			this.carList=[]
			this.checkServer=[]
			this.checkServer2=[]
			this.carList1=[]
			this.carList2=[]
		},
		// 关闭购物车
		closeCar() {
			this.isCarShow=false
		},
		// 打开购物车
		showCar(){
			console.log('打开购物车弹窗')
			this.isCarShow=true
		},
		/**
		 * 多选框
		 */
		checkGroup(e) {
			// console.log('差大城市',e);
		},
		checkGroup2(e) {
			// console.log('差大城市',e);
		},
		
			showChecked(){
				console.log('展示的',this.checkServer)
			},
	
		checkChange(e,item) {
			item.num =1
			item.goodsCount=item.num
			// console.log('选择的自带商品1',this.checkServer,e,item)

			// let arr=this.checkServer
			let arr=this.uniqs(this.checkServer)
			let endArr=[]
			arr.map(item=>{
				endArr.push(item)
			})
			this.carList1=endArr
			console.log('选择的商品自带商品',this.carList1,this.carList2)
			this.carList=this.carList1.concat(this.carList2)
		},
		
		//多选框2
		checkChange2(e,item){
			item.num =1
			let arr=this.deWeight(this.checkServer2)
			console.log('选择的会员卡商品1',this.checkServer2)
			let endArr=[]
			arr.map(item=>{
				endArr.push(item)
			})
			this.carList2=endArr
			console.log('选择的会员卡商品',this.carList1,this.carList2)
			this.carList=this.carList1.concat(endArr)
		},
		
		
		/**
		 * 使用他人会员卡按钮
		 */
		// 关闭弹窗
		closeVipAlert(close){
			this.usevip=false
			this.radio=false
		},
		// 接收使用他人会员卡弹窗传来的值
		sendVipData(customerCode,state){
			this.state=state
			this.showInput=true
			this.usevip=false
			this.customerCode=customerCode
			this.getVipProduct(customerCode)
		    },
		// 弹窗
		
		check(val) {
			if(this.radio){
				this.showSwitch=true
			}else{
				this.showSwitch=false
			}
			console.log('单选框', this.radio,val);
			if(this.vehicleId!=null){
				if (this.radio) {
					this.usevip=true
				}else{
					this.otherName=''
					this.otherPhone=''
					this.otherCar=''
					this.state=''
					this.sCheck=[]
				}
			}else{
				this.$alert('使用他人会员卡请先输入正确车牌号', '提示', {
					confirmButtonText: '确定',
				});
							 this.radio=false
			}
		},
		
		/**
		 * 车牌编辑
		 */
		closeCarAlert(close){
			this.setCarshow=false
		},
		// 接收弹窗传来的值
		sendCarData(setCarshow,plateNumber){
			console.log('接收子组件传来的值',setCarshow,plateNumber)
			this.state=''
			this.radio=false
		  this.setCarshow=false
			this.carNum=plateNumber
			this.inputVipList(plateNumber)
				this.showInput=true
		    },
		// 编辑车牌弹窗打开
		setCar(){
			this.setCarshow=true
		},
		
		// 获取车品牌车型
		getCarBrand(){
			this.$http.get('/laborSynthesize/getBrandList',{
				merchantCode:this.merchantCode
			})
			.then(res=>{
				 if(res.code == '10000'){
				res.data.map(item=>{
					item.value=item.brandId
					item.label=item.brandName
				})
				 this.carTypes=res.data
				 // this.brandId=
				}
			})
		},
		
		
		/**
		 * @param {Object} 新建服务
		 */
		// 打开新建服务
		openNs(){
			this.nsIsShow = true
				this.$http.get('/LaborGoods/getSelect',{
				})
				.then(res=>{
					 console.log('请求服务模板结果2',res)
					 if(res.code == "10000"){
					this.nsList=res.data
					}
				})
				this.getOptions('1')
		},
		// 取消新建
		closeNs(){
			this.nsIsShow = false
		},
		// 保存并且继续新建
		saveNs(){
			
		},
		// 确认新建
		sendNs(){
			this.nsIsShow = false
		},
		
		
		/**
		 * @param {Object} 新建商品
		 */
		openNp(){
			this.npIsShow = true
			this.getOptions('2')
		},
		// 取消新建
		closeNp(){
			this.npIsShow = false
		},
		// 保存并且继续新建
		saveNp(){
			
		},
		// 确认新建
		sendNp(){
			this.npIsShow = false
		},
		
		/**
		 * @param {Object} 去重方法
		 */
		deWeight(arry){
			   let newAry = [];
			   for (let i = 0; i<arry.length; i++) {
			      if (newAry.indexOf(arry[i]) === -1) {
			        newAry.push(arry[i]);
			      }
			   }
			   return newAry;
		},
		
		deWeight2(arry){
			   let newAry = [];
			   for (let i = 0; i<arry.length; i++) {
			      if (newAry.indexOf(arry[i].goodsName) === -1) {
			        newAry.push(arry[i]);
			      }
			   }
			   return newAry;
		},
		
		
		uniqs(array){
		    let temp = []; //一个新的临时数组
		    for(let i = 0; i < array.length; i++){
					if(temp.length==0){
						temp.push(array[i])
					}else{							
						let o = 0;
						for(let a = 0; a < temp.length;a ++){
							var obj = array[i];
							var obj1 = temp[a];
							if(JSON.stringify(obj1)===JSON.stringify(obj)){
								o = 1;
								break;
							}
						}
						if(o == 0){
							temp.push(array[i]);
						}		       
					}
		    }
		    return temp;
		},
		
		/**
		 * 手机号验证
		 */
		inputTel(val){
			let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
			if(reg.test(val)){
				console.log(this.vehicleId!=null,this.carAddTel!=null,this.carAddName!=null)
				if(this.vehicleId==null&&this.carAddTel!=null&&this.carAddName!=null){
					this.addNew(this.carNum,this.carAddTel,this.carAddName)
				
				}	
			}else{
				this.$message.error('请输入正确的手机号')
				this.carAddTel=''
			}
		},
		inputName(val){
			// this.addNew()
			console.log(this.vehicleId!=null,this.carAddTel!=null,this.carAddName!=null)
			if(this.vehicleId==null&&this.carAddTel!=null&&this.carAddName!=null){
				this.addNew(this.carNum,this.carAddTel,this.carAddName)
			}	
		},
		
	}
};
</script>
<style scoped>
/deep/ .kil .el-input__inner {
	padding: 0;
	height: 23px;
}
/deep/ .c-date .el-date-editor.el-input {
	width: 100px;
	height: 23px;
}
/deep/ .c-date .el-input--suffix .el-input__inner {
	padding-right: 0;
	height: 23px;
}
/deep/ .c-date .el-input--mini .el-input__icon {
	line-height: 23px;
}
/deep/ .c-checkBoxs .el-checkbox {
	border-radius: 10px;
	/* border:1px solid #6f93fe; */
	box-shadow: 3px 4px 8px #6f93fe;
	padding: 10px;
	padding-right: 55px;
}
.discount {
	width: 32px;
	height: 15px;
	background: #5682ff;
	font-size: 5px;
	/* line-height: 15px; */
	color: #fff;
}
/deep/ .c-checkBoxs .el-checkbox__input {
	margin-top: -20px;
}
/deep/ .c-checkBoxs .el-checkbox__inner {
	border-radius: 50%;
}
.end {
	margin-top: 150px;
	border-top: 2px solid #c5c5c8;
	padding-top: 30px;
}
.end-btn .title {
	color: #c5c5c8;
	font-size: 24px;
}
.end-img .icon {
	width: 15px;
	height: 15px;
	background: #f00;
	border-radius: 50%;
	margin-left: 2px;
	margin-top: -5px;
	color: #fff;
	font-size: 5px;
	line-height: 16px;
}
.carAlert:hover{
	/* animation:carAlert 3s infinite 0s */
}
.carTable {
	/* display: none; */
	width: 461px;
	position: absolute;
	top:-221px;
	left:0px;		
}
.carTable .head {
	background: #6d9bfd;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	color: #fff;
	font-size: 10px;
}
.carTable .head img {
	width: 15px;
	height: 15px;
}
.carDel{
	cursor:pointer
}
/deep/ .col .el-submenu .el-menu-item{
	min-width:0px
}
.tabs .active{
	background: #fff;
	border-bottom: 2px solid rgb(24, 144, 255);
	color: rgb(24, 144, 255);
}
.actives{
	background:#169BD5  !important;
}
</style>
